<template>
  <div id="app">
    <video autoplay loop muted src="../../assets//vido/loginback.mp4"></video>
    <div class="formbox">
      <!-- 标题 -->
      <div class="title">
        <img src="../../assets//imgs//logo.png" alt="" />
      </div>

      <el-form
        style="max-width: 600px"
        status-icon
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-input
          v-model="formData.account"
          style="height: 50px"
          placeholder="Please input"
        />
        <el-input
          class="inptZ"
          v-model="formData.password"
          placeholder="Please input"
        />
        <el-input
          v-model="formData.code"
          style="height: 50px"
          placeholder="验证码"
        >
          <template #suffix>
            <div @click="getCodeImg" class="imgbox">
              <img :src="imgUrl" alt="" />
            </div>
          </template>
        </el-input>
        <el-button @click="submitForm" class="but" type="danger"
          >登录</el-button
        >
      </el-form>
      <div></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { loginAddCode } from '../../api/iogin';
import { reactive, ref } from 'vue';
import { useLoginStore } from '../../store/useLoginStore';
import router from '../../router/index';

const LoginStore = useLoginStore();
//图片储存数据
const imgUrl = ref('');

/**
 *  账号 :  demo
 *  展示账号密码  995itheima.CN032@.20250702
 *  开发账号密码  hm#qd@23!
 * */ 

//账号数据
const formData = reactive({
  account: 'demo',
  password: '995itheima.CN032@.20250702',
  code: '',
  key: '1234qwqw',
});

//请求验证码图片
const getCode = async () => {
  const res = await loginAddCode();
  imgUrl.value = `data: image/jpeg;base64,${btoa(
    new Uint8Array(res).reduce(
      (data, byte) => data + String.fromCharCode(byte),
      ''
    )
  )}`;
};
getCode();

//点击重新获取验证
const getCodeImg = () => {
  getCode();
};

//点击登录
const submitForm = async () => {
  await LoginStore.loginData(formData);
  router.push('/');
};
</script>
<style scoped lang="less">
  @import url(./style/index.less);
</style>
